<!--  -->
<template>
  <div>
    <div class="tools">
      <div>
        <el-input
          prefix-icon="el-icon-search"
          style="width: 200px;margin-right: 10px;"
          size="small"
          v-model="userName"
          placeholder="请输入内容"
        ></el-input>
        <el-button icon="el-icon-search" type="primary" size="small" @click="search">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" style="width:100%">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" style="width:100%">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.userName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="头像" style="width:100%">
        <img class="avr" src="http://106.12.206.156/file/2021/1f51fca514494973a1c6c3ecc445d8e7.jpg" />
      </el-table-column>
      <el-table-column prop="createtime" sortable label="创建日期"></el-table-column>
      <el-table-column label="操作" style="width:100%">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      userName: ""
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.getUserList();
  },
  methods: {
    //获取用户列表
    getUserList() {
      this.getRequest("/user/info/getUserList", {
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records;
      });
    },
    //删除用户
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.deleteRequest(`user/info/delUser/${row.id}`).then(res => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getUserList();
        });
      });
    },
    search() {
      this.getRequest("/user/info/getUserList", {
        userName: this.userName
      }).then(res => {
        this.tableData = res.data.records;
      });
    }
  },
  watch: {}
};
</script>

<style lang='css' scoped>
.avr {
  width: 50px;
  height: 50px;
}
.tools {
  display: flex;
  justify-content: space-between;
}
</style>